<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="挂载权限数据"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :before-close="beforeClose"
    class="tag-edit-dialog auth-mount-dialog"
    width="40%"
    v-dialogMove
  >
    <p>
      当前正在进行<span class="tips">【{{ authNm }}】</span>{{ authType === 2 ? '标签包' : '标签' }}的额外挂载
    </p>
    <div class="mount-wrap tag-scrollbar">
      <span class="check-all"><el-checkbox v-model="checkAll" @change="handleCheckAll"></el-checkbox>全选</span>
      <el-tree
        ref="authMountTree"
        :data="treeList"
        :props="defaultProps"
        show-checkbox
        highlight-current
        default-expand-all
        :default-checked-keys="checkedKeys"
        node-key="deptId"
        empty-text="暂无内容"
      ></el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      keyList: [],
      treeList: [],
      defaultProps: {
        label: 'deptFname',
        children: '_children'
      },
      checkedKeys: [],
      authType: 2,
      authValue: '',
      authNm: '',
      checkAll: false
    }
  },
  methods: {
    showDialog(data) {
      this.authType = data.authType
      this.authValue = data.authValue
      this.authNm = data.authNm
      this.dialogVisible = true
      this.getDepts()
    },
    getDepts() {
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astTagDerivedAuth/col/deptList/${this.authType}/${this.authValue}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          let treeList = []
          let list = this.$utils.arrayToTree(data.data, {
            id: 'deptId',
            pid: 'parentDeptId',
            mainSort: 'treeLevel'
          })
          data.data.forEach(item => {
            this.keyList.push(item.deptId)
            if (item.authConfigCount) this.checkedKeys.push(item.deptId)
          })
          list.forEach(item => {
            const index = treeList.findIndex(listItem => listItem.compId === item.compId)
            if (index >= 0) {
              if (treeList[index]._children) treeList[index]._children.push(item)
              else treeList[index]._children = [item]
            } else {
              treeList.push({
                compId: item.compId,
                deptFname: item.compNm,
                _children: [item]
              })
            }
          })
          this.treeList = treeList
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    handleCheckAll(val) {
      this.$refs.authMountTree.setCheckedKeys(val ? this.keyList : [])
    },
    submit() {
      let keys = this.$refs.authMountTree.getCheckedKeys()
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagDerivedAuth/col/batch'),
        method: 'post',
        data: this.$ajax.setData({
          authType: this.authType,
          authValue: this.authValue,
          authKeyList: keys.filter(item => !!item)
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.msg)
          this.$emit('callback', this.authType)
          this.beforeClose()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    beforeClose() {
      this.keyList = []
      this.treeList = []
      this.checkedKeys = []
      this.authType = 2
      this.authValue = ''
      this.authNm = ''
      this.checkAll = false
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
.auth-mount-dialog {
  .mount-wrap {
    height: 500px;
    padding: 10px;
    margin-top: 10px;
    border: 2px solid #eee;
    border-radius: 5px;
    overflow-y: auto;
  }
  .tips {
    margin-left: 0;
    color: $theme-color;
  }
  .check-all {
    font-weight: bold;
    margin-left: 24px;
    .el-checkbox {
      margin-right: 10px;
    }
  }
}
</style>
